<template>
	<div class="container">
		<!-- 主导航栏 -->
		<!-- <ul class="main-tabs clearfix">
			<li v-for="(item,index) in mainTabs.data" :key="index" :class="{active:index==mainTabs.index}"
				@click="mainTabSwitch(index)">{{item.title}}</li>
		</ul> -->

		<h3 class="header-title clearfix">
			<span class="border"></span>
			<p>{{headerTitle}}</p>
			<span class="addUser" @click="opneAddUser">发布岗位</span>
		</h3>
		<!-- <comNavTabs :navList="navList" @switch="tabSwitch"></comNavTabs> -->
		<!-- <comSearch   :options="searchData" @search="searchList"></comSearch> -->
		<p style="padding-top: 20px;">公司名称：<span style="color: #0000CC;">{{companyName}}</span></p>
		<el-form :model="form" :inline="true">
			<el-form-item label="职位名称">
				<el-input v-model="form.userName" placeholder="请输入企业名称"></el-input>
			</el-form-item>
			<el-form-item style="width:400px;text-align:center;">
				<el-button type="primary" @click="search" size="small" class="searchBtn">查询</el-button>
				<!-- <el-button type="primary" @click="search" size="small" class="searchBtn">导出</el-button> -->
			</el-form-item>
		</el-form>

		<!-- 	<comTable :options="tableList"
		@lookposition="function(data){lookposition(data)}"
		@updateposition="function(data){updateposition(data)}"
		@downposition="function(data){downposition(data)}"
		></comTable> -->


		<div class="table-box table" <el-table class="memberList-table" :data="tableListdata"
			:cell-style="tableRowStyle">cell-class-name="member-cell"
			header-cell-class-name="member-header" :header-cell-style="{ background: '#cae5fa',color: '#727272' }"
			border stripe style="width: 100%" size="small">
			<el-table-column prop="positionname" label="岗位名称" align="center">
			</el-table-column>
			<el-table-column prop="maxwage" label="薪资待遇" align="center">
			</el-table-column>
			<el-table-column prop="address" label="工作地址" align="center">
			</el-table-column>
			<el-table-column prop="insertdate" label="发布日期" align="center">
			</el-table-column>
			<el-table-column prop="status" label="状态" align="center">
				<template slot-scope="scope">
					<span :style="{color:getColorBycol(scope.row)}">{{scope.row.status}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="realname" label="操作" align="center">
				<template slot-scope="scope">
					<span v-show="scope.row.look" style="color:rgb(43,54,251); cursor: pointer;"
						@click="lookposition(scope.row)">查看</span>
					<span v-show="scope.row.up" style="color:rgb(43,54,251); cursor: pointer;"
						@click="updateposition(scope.row)">修改</span>
					<span v-show="scope.row.del" style="color:rgb(43,54,251);cursor: pointer;"
						@click="downposition(scope.row)">下架</span>
					<span v-show="scope.row.reset" style="color:rgb(43,54,251);cursor: pointer;"
						@click="restposition(scope.row)">重新上架</span>
				</template>
			</el-table-column>
			</el-table>
			
			<div class="pageBox">
				<el-pagination @size-change="handleSizeChange" @current-change="pageChange" :current-page.sync="cur"
					:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background></el-pagination>
			</div>
			
			<el-dialog :visible.sync="detailFlag" width="800px" center>
				<position-info v-if="detailFlag" :id="positionid" :type="searchParam.type"  
					v-on:cancle="cancle" :remark="remark" :company="company"></position-info>
				<div slot="footer">
				</div>
			</el-dialog>
		</div>


		<!-- <el-dialog :visible.sync="showDialog" width="660px" height="309px" class="evalDialog">

			<div class="dialogForm">
				<h2>新增录用专员</h2>
				<el-form :model="form" :inline="true">
					<el-form-item label="姓名" label-width="100px">
						<el-input v-model="form.telnum" placeholder="请输入充值人名称" style="width: 320px; height: 48px;"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" label-width="100px">
						<el-input v-model="form.telnum" placeholder="请输入充值人名称" style="width: 320px; height: 48px;"></el-input>
					</el-form-item>
					<el-form-item label="账号" label-width="100px">
						<el-input v-model="form.telnum" placeholder="请输入充值人名称" style="width: 320px; height: 48px;"></el-input>
					</el-form-item>
				<el-form-item   label-width="100px">
				<p class="remend">
				账号密码为admin@123,请联系工作人员登录并修改	
				</p>
				<el-button type="primary" style="margin-left: 203px;">确定</el-button>
				</el-form-item>
				</el-form>

			</div>
		</el-dialog> -->
			
		
		
		
	</div>
</template>

<script>
	import positionInfo from "../socical/post/positionInfo.vue"
	export default {
		components: {
			positionInfo,
			comNavTabs: () => import("@/household/common/comNavTabs.vue"),
			comSearch: () => import("@/component/common/comSearch.vue"),
			// 	comImport: () => import("@/component/common/comImport.vue"),
			comTable: () => import("@/household/common/comTable.vue"),
			// 	flexDemand: () => import("@/component/flexible/flexDemand.vue"),
			// 	flexManualEntry: () => import("@/component/flexible/flexManualEntry.vue"),
			// 	flexRegisterMsg: () => import("@/component/flexible/flexRegisterMsg.vue"),
			// 	flexUnsuccessful: () => import("@/component/flexible/flexUnsuccessful.vue"),
			// 	flexUpload: () => import("@/component/flexible/flexUpload.vue"),
			// 	flexCollectAccount: () => import("@/component/flexible/flexCollectAccount.vue"),
			// 	flexImportTemplate: () => import("@/component/flexible/flexImportTemplate.vue"),
		},
		data() {
			return {
				searchParam: {
					type: "0",
					keytype: "1",
					keyvalue: "",
					tradename: ""
				},
				show1: true,
				show2: true,
				show3: true,
				show4: true,
				tableListdata: [],
				companyName: '',
				companyid: '',
				showDialog: false,
				headerTitle: '岗位管理',
				navList: {
					index: 0, //当前是在哪个tab栏
					data: [{
							title: '使用中'
						},
						{
							title: '已注销'
						},
					]
				},
				tableList: {
					list: [{
							title: '职位名称',
							prop: 'companyName',
							isClick: false
						},
						{
							title: '新资待遇',
							prop: 'telnum',
							isClick: false
						},
						{
							title: '工作地址',
							prop: 'createTime',
							isClick: false
						},
						{
							title: '发布日期',
							prop: 'projectName',
							isClick: false
						},
						{
							title: '发布状态',
							prop: 'costStandard',
							isClick: false
						},
						// {
						// 	title: '发布岗位数量	',
						// 	prop: 'costStandard',
						// 	isClick: false
						// },
						// {
						// 	title: '状态	',
						// 	prop: 'costStandard',
						// 	isClick: false
						// },
					],
					noOperation: true, //是否有操作项
					operation: [ //操作项内容
						{
							name: '修改',
							isBtn: false,
							title: 'updateposition'
						},
						{
							name: '下架',
							isBtn: false,
							title: 'downposition'
						},
						{
							name: '查看',
							isBtn: false,
							title: 'lookposition'
						}
					],
					data: [
						/* {
							companyName: '上海天都人力资源有限公司',
							telnum: '15202120781',
							createTime: '2020-10-12',
							projectName: '帮助公司设计官方网站',
							costStandard: '5000元',
						} */
					]
				},
				searchData: {
					noFounder: true, //姓名
					noTime: true, //时间段
					phonenum: true, //手机号码
					searchInfo: {}, //搜索信息
				},

				form: {
					userName: '', //用户姓名
					telnum: '', //电话
					startDate: '', //开始时间
					endDate: '', //截至时间
				},
				company: '',
				positionid: '',
				remark: '',
				detailFlag: false,
				cur:0,
				pageSize:10,
				totalNum:0,
			}
		},
		created() {
			this.tabSwitch(0)
			this.companyName = this.$route.query.companyname
			this.companyid = this.$route.query.id
			console.log(this.companyid);
		},
		methods: {
			pageChange(p) {
				// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
				// 然后把这个当前页数转换成字符串形式赋值给page，
				// 然后把page这个参数传给search这个方法
				this.cur = p;
				this.tabSwitch(0)
			},
			handleSizeChange(val) {
				console.log(val);
				this.pageSize = val;
				this.tabSwitch(0)
			},
			showDetail(row) {
				this.positionid = row.positionid;
				this.remark = row.remark;
				this.company = row.companyname;
				this.detailFlag = true;
			},

			tableRowStyle({
				row,
				rowIndex
			}) {
				return 'font-size:15px;'
			},
			getColorBycol(scope) {
				if (scope.status == '上架中') {
					this.show1 = false
					return "rgb(67, 167, 40)"
				} else if (scope.status == '平台下架') {
					return "rgb(212, 206, 73)"
				} else {
					return "rgb(251, 95, 94)"

				}
			},
			updateposition(data) {
				console.log(data);
				this.linkTo("/home/enteringaddposition", {
					positionid: data.positionid,
					companyname:this.companyName,
					check:true
				});

			},

			restposition(data) {
				this.linkTo("/home/enteringaddposition", {
					positionid: data.positionid,
					reset:true,
					companyname:this.companyName,
				});

			},
			downposition(data) {
				this.delpositionid = data.positionid
				this.$confirm('是否确定下架该岗位？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = {
						positionType: 2,
						positionid: data.positionid,
					}
					this.$ceshiAxios.post('/v1/recruit/cancel', params).then(res => {
						console.log(res);
						if (res.data.code === 1) {
							this.tabSwitch(0)
							this.$message.success('下架成功');
						} else {
							this.$message.warning(res.data.message);
						}
					})

				})
			},
			subPutDown(text) {
				console.log(text);

			},
			lookposition(row) {
				console.log(row);
				this.positionid = row.positionid;
				this.remark = row.remark;
				this.company = row.companyname;
				this.detailFlag = true;
				// this.linkTo("/home/enteringaddposition", {
				// 	positionid: data.positionid
				// });

			},
			search() {
				this.tabSwitch(0);
			},
			opneAddUser() {
				this.linkTo("/home/enteringaddposition", {
					id: this.companyid,
					companyname: this.companyName
				});
			},
			tabSwitch(index) {
				this.navList.index = index;

				if (this.navList.index == 0) {
					this.tableList.list = [{
							title: '职位名称',
							prop: 'positionname',
							isClick: false
						},
						{
							title: '薪资待遇',
							prop: 'maxwage',
							isClick: false
						},
						{
							title: '工作地址',
							prop: 'address',
							isClick: false
						},
						{
							title: '发布日期',
							prop: 'insertdate',
							isClick: false
						},
						{
							title: '发布状态',
							prop: 'status',
							isClick: false
						},
					]
					// this.$route.query.positionname
					let params = {
						companyid: this.$route.query.id,
						positionname: this.form.userName,
						pagesize:this.pageSize,
						pagenum:this.cur
					}
					this.$ceshiGetAxios('v1/position/listBycompanyid', params).then(res => {
						this.tableList.data = res.data.data
						this.tableListdata = res.data.data.plist
						this.totalNum=Math.abs(res.data.data.total)
						let list = res.data.data.plist
						for (var i in list) {
							if (list[i].maxwage != '' && list[i].minwage != '') {
								list[i].maxwage = list[i].miniwage / 1000 + 'k-' + list[i].maxwage / 1000 + 'k'
							}
							if (list[i].status == 0) {
								list[i].status = '企业下架'
								list[i].look = '查看'
								list[i].reset = '重新上架'
							} else if (list[i].status == 1) {
								list[i].status = '上架中'
								list[i].look = '查看'
								list[i].del = '下架'
								list[i].up = '修改'
							} else if (list[i].status == 2) {
								list[i].status = '平台下架'
								list[i].look = '查看'
							} else if (list[i].status == 3) {
								list[i].status = '个人下架删除'
								list[i].look = '查看'
							}
						}
					})
				}
			},
			searchList(form) {
				if (form.userName) {
					form.businessmanName = form.userName;
					delete form.userName;
				}
				console.log(form);
				this.searchData.searchInfo = form;
				this.getDataList(this.searchData.searchInfo);
			},
		},

	}
</script>

<style scoped="scoped">
	.search {
		margin: 20px 0;
	}

	.el-form-item {
		min-width: 300px;
		float: left;
		margin-right: 20px;
	}

	.el-form {
		margin-top: 20px;
	}

	.searchBtn {
		width: 140px;
	}

	.searchBox {
		padding: 0 30px;
	}

	.container {
		background-color: #fff;
		height: 100%;
		padding-left: 20px;
	}

	.main-tabs {
		background-color: #EFF1F8;
		margin-bottom: 20px;
		margin-left: -20px;
		padding-left: 50px;
	}

	.main-tabs li {
		height: 40px;
		line-height: 40px;
		float: left;
		margin: 10px 20px;
		padding: 0 30px;
		cursor: pointer;
	}

	.main-tabs .active {
		background: #0064E4;
		border-radius: 20px;
		color: #fff;
	}

	.addUser {
		cursor: pointer;
	}

	.dialogForm {
		margin: 0 auto;
		width: 600px;
		height: 300px;
		padding-left: 58px;

	}

	.remend {
		margin-left: 100px;
		color: red;

	}

	.dialogForm h2 {
		margin: 23px 167px;
		padding-top: 20px;
	}

	.dialogForms {
		width: 600px;
		margin: 0 auto;
		height: 400px;
	}

	.header-title {
		margin-top: 20px;
		padding: 0 0 20px 0;
		border-bottom: 1px solid #D2D2D2;
	}

	.header-title .border {
		width: 15px;
		height: 30px;
		background-color: #0064E4;
		margin-right: 20px;
		float: left;
	}

	.header-title p {
		float: left;
		font-weight: bold;
		line-height: 30px;
	}

	.header-title span {
		display: inline-block;
		float: right;
		font-weight: bold;
		color: #0000FF;
		line-height: 30px;
		margin-right: 20px;
	}

	.header-title .opt span {
		float: left;
		margin-right: 20px;
		padding: 10px 20px;
		border: 1px solid #000;
		border-radius: 20px;
		cursor: pointer;
	}

	.pageBox {
		margin-top: 20px;
	}
</style>
